<script lang="ts" setup>
import { getImg } from "@/utils";
const attrs = useAttrs();
const { currGame = {} } = defineProps<{
  currGame: any;
}>();

const isLikeScaled = ref(false); // 控制是否放大的状态
const linkTimerId = ref<any>(0);
const clickLike = () => {
  isLikeScaled.value = true; // 设置为放大状态
  clearTimeout(linkTimerId.value);
  linkTimerId.value = setTimeout(() => {
    isLikeScaled.value = false; // 300ms 后恢复原状
  }, 300);
};

const isUnlikeScaled = ref(false);
const unlinkTimerId = ref<any>(0);
const clickUnlike = () => {
  isUnlikeScaled.value = true;
  clearTimeout(unlinkTimerId.value);
  unlinkTimerId.value = setTimeout(() => {
    isUnlikeScaled.value = false;
  }, 300);
};
</script>
<template>
  <div class="flex-center gap-x-41" v-bind="{ ...attrs }">
    <div
      class="flex flex-col justify-start items-center gap-y-4"
      @click="clickLike"
    >
      <img
        class="w-21 h-21 transition-all"
        :src="getImg('yq_zan.png')"
        :class="{ 'scale-140': isLikeScaled }"
        alt=""
      />
      <span class="font-400 text-15 color-[#24F100]">{{ currGame.like }}k</span>
    </div>
    <div
      class="flex flex-col justify-start items-center gap-y-4"
      @click="clickUnlike"
    >
      <img
        class="w-21 h-21 transition-all"
        :src="getImg('yq_cp.png')"
        :class="{ 'scale-140': isUnlikeScaled }"
        alt=""
      />
      <span class="font-400 text-15 color-[#F65347]"
        >{{ currGame.unlike }}k</span
      >
    </div>
  </div>
</template>
